<!--友情链接-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/personal_center.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <!--<link rel="stylesheet" href="../less/laypage.css">-->
    <link rel="stylesheet" href="../css/select2.css">
    <style>
        .select2-container--default .select2-selection--single .select2-selection__arrow{
            height: 38px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered{
            line-height: 38px;
        }
        .select2-container .select2-selection--single{
            height: 38px;
            border-color: #D2D2D2!important;
            border-radius: 2px;
        }
    </style>
    <style>
        .mask-look-brand{
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.6;
            z-index: 30;
        }
        .mode-brand-c{
            position: fixed;
            width: 800px;
            height: 602px;
            overflow-y: auto;
            background-color: #fff;
            z-index: 50;
            left: 50%;
            top: 50%;
            margin-top: -301px;
            margin-left: -400px;
        }
        .mode-brand-c .title{
            line-height: 48px;
            background-color: #FB6A30;
            text-align: center;
            color: #fff;
            font-size: 16px;
        }
    </style>
</head>
<body>
<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->

<div style="display: none" id="modal-brand">
    <div class="mask-look-brand"></div>
    <div class="mode-brand-c">
        <div class="title">
            <span>查看</span>
            <span class="icon_close close_mode" style="top: 18px;"></span>
        </div>

        <div class="">
            <div class="item">
                <div>
                    <div class="input-box1" style="padding: 20px">
                        <div class="li clearfix">
                            <div class="left-k" style="text-align: left;margin-top: 0"><span class="text-sty1" style="margin-left: 0">选择授权品牌</span></div>
                        </div>
                        <div class="li clearfix">
                            <div class="box-select2 input-v mr-20" style="margin-left: 0;">
                                <select name="" id="brandBox" style="width: 300px">
                                    <option value="">请选择授权品牌</option>
                                </select>
                            </div>


                        </div>
                        <div class="li clearfix">
                            <div class="left-k" style="text-align: left"><span class="col-ff4"></span><span class="text-sty1" style="margin-left: 0">动态配图</span></div>
                        </div>
                        <div class="li clearfix">
                            <div class="file-img">
                                <div class="box-file">
                                    <img src="../img/file1.png" alt="" class="upload_btn">
                                </div>
                            </div>
                        </div>
                        <div class="li clearfix">
                            <div class="left-k" style="text-align: left"><span class="col-ff4"></span><span class="text-sty1" style="margin-left: 0">填写授权文字</span></div>
                            <div class="right-v">

                            </div>
                        </div>
                        <div class="li clearfix">
                            <div class="right-v wid-820">
                                <textarea style="width: 600px" class="js-describe" placeholder="请填写授权描述信息" name="" id="" cols="30" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="">
                            <span class="release-btn1 js-add">提交授权申请</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html?x=3&y=6" frameborder="0"></iframe>
    </div>-->
    <div class="right-box layui-form" id="vue-box" v-cloak>
        <div class="content-admin">
            <div class="title-toggle">
                <div class="item"><a href="apply_brand.html">申请品牌授权</a></div>
                <div class="item active">品牌授权情况</div>
            </div>
            <div>


                <div class="table-list">
                    <table>
                        <thead>
                        <tr>
                            <th class="js-allCheck width-b25">
                                图片
                            </th>
                            <th class="width-b20">品牌</th>
                            <th class="">授权时间</th>
                            <th class="">状态</th>
                            <th class="width-b20">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in pagList">
                            <td class="js-onlyCheck p-r">
                                <span v-if="item.weight==1" style="left: 10px;position: absolute;color: red;">优势</span>
                                <img :src="imgBaseUrl + item.picUrl" alt="" class="img-sty"></td>
                            </td>
                            <td>{{item.zslOrigin.name}}</td>
                            <td>{{item.crtTime}}</td>
                            <td>{{item.status | filterStatus }}</td>
                            <td>
                                <div>
                                    <div class="btn-fun js-edit" :id="item.id" @click="edit(item.originId,item.urlArr,item.describe)">{{item.status==2?'重新审核':''}}</div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div id="test1" class="text-r"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="link-modal hide">
    <div class="mask-link js-hideModal"></div>
    <div class="content-link">
        <div class="title">添加友情链接</div>
        <div class="item">
            <span>名称：</span><input type="text" class="layui-input js-linkName">
        </div>
        <div class="item">
            <span>网址：</span><input type="text" class="layui-input js-linkVal">
        </div>
        <div class="clearfix pr20">
            <div class="fr">
                <span class="btn-sty11 mr-20 js-addLink">确认</span>
                <span class="btn-sty11 js-hideModal">取消</span>
            </div>
        </div>
    </div>
</div>


<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script src="../js/select2.full.js"></script>
<script>
    var postData = {
        limit:5,
        offset:1,
        status:'',
    }

    var app = new Vue({
        el: '#vue-box',
        data: {
            pagList:'',
            imgBaseUrl: imgBaseUrl,
        },
        mounted:function(){
            this.getPage();
            var that = this;
            get_ajax("/sys/origin/getAllNewPage", {}, function (data) {
                data.forEach(function (item) {
                    item.text = item.name;
                })
                $("#brandBox").select2({
                    data: data,
                    placeholder: '请选择',
                    allowClear: true
                })
            })
        },
        updated:function () {
        },
        methods:{
            getPage:function(){
                var that = this;
                get_ajaxPage("/originAuthorization/getMyPage", postData, function (data) {
                    data.data.forEach(function (item) {
                        item.urlArr = item.imgUrl.split(",");
                        item.picUrl = item.imgUrl.split(",")[0];
                    })
                    that.pagList = data.data;
                    layui.use('laypage', function(){
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        laypage.render({
                            elem: 'test1'
                            ,count: data.count //数据总数，从服务端得到
                            ,limit:postData.limit
                            ,jump: function(obj, first){
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数

                                //首次不执行
                                if(!first){
                                    //do something
                                    postData.offset = obj.curr;
                                    get_ajaxPage("/originAuthorization/getMyPage", postData, function (data) {
                                        data.data.forEach(function (item) {
                                            item.picUrl = item.imgUrl.split(",")[0];
                                        })
                                        that.pagList = data.data;
                                    })
                                }
                            }
                        });
                    });
                })
            },
            edit:function(originId,imgUrl,describe){
                console.log(imgUrl);
                $("#brandBox").val(originId).trigger("change");
                $('.js-describe').val(describe);
                $('.file-img').find('.remove').remove();
                imgUrl.forEach(function(item){
                    var el ='<div class="box-file remove" data-picUrl="'+item+'">'
                        +'<span class="del-png icon_close"></span>'
                        +'<img src="'+imgBaseUrl+item+'" alt="" class="upload_btn">'
                        +'</div>'
                    $('.file-img').append(el);
                })
                $('#modal-brand').show();



            },

        },
        filters:{
            filterStatus:function(val){
                if(val==0){
                    return '审核中'
                }else if(val==1){
                    return '审核成功'
                }else{
                    return '审核失败'
                }
            }
        }
    });

    //图片上传
    layui.use(['upload'], function () {
        var $ = layui.jquery, upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.upload_btn'
            ,multiple:true
            , url: baseUrl + '/file/upload?token=' + Token
            , before: function (obj) {
                loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            }
            , done: function (res, index) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg.msg('上传失败');
                } else {
                    var data = res.data;
//                    var str = '<div class="upload_img" picUrl="' + data.address + '" picId="' + data.id + '">' +
//                        '<i class="icon_delete"></i><img src="' + imgBaseUrl + data.address
//                        + '" alt=""></div>'
//                    this.item.parents(".file").after(str);
                    var el ='<div class="box-file" data-picUrl="'+data.address+'">'
                        +'<span class="del-png icon_close"></span>'
                        +'<img src="'+imgBaseUrl+data.address+'" alt="" class="upload_btn">'
                        +'</div>'
                    $('.file-img').append(el);
                    layer.close(loading);
                    console.log('上传成功！')
                }

            }
            , error: function () {

            }
        });
    })
    //    del-png
    $(document).on('click','.del-png',function(){
        $(this).parents('.box-file').remove();
    })
    $('.mask-look-brand,.close_mode').click(function(){
        $('#modal-brand').hide();
    })
    $('.js-add').on('click',function(){  //新增
        var pngStr = '';
        $('.box-file').each(function(index){
            if(index>0){
                pngStr += $(this).attr('data-picurl')+','
            }
        })
        var picUrl = pngStr.slice(0,pngStr.length-1);
        if(!$('#brandBox').val()){
            layer.msg('请选择授权品牌！')
            return false;
        }
        if(!picUrl){
            layer.msg('请添加动态配图！')
            return false;
        }
        if(!$('.js-describe').val()){
            layer.msg('请填写授权文字！')
            return false;
        }
        get_ajax("/originAuthorization/add", {describe:$('.js-describe').val(),imgUrl:picUrl,originId:$('#brandBox').val()}, function (data) {
            layer.msg('申请成功！');
            $('#modal-brand').hide();
        })

    })





















</script>
</body>
</html>
